<template>
	<view>
		<!-- <view class="" style="width: 100%;margin: 0 auto;display: flex;text-align: center;line-height: 100rpx;background-color: #FFFFFF;">
			<view @click="dibu(1)" style="flex: 1;position: relative;" :class="tabIndex==1?'active':'a'">
				全部
				<image v-if="tabIndex==1" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/2176b3fec852179c4610f402fdac0589.png" style="width: 100rpx;height: 12rpx;position: absolute;left:50%;bottom: 16rpx;transform: translateX(-50%);"  mode=""></image>
			</view>
			<view @click="dibu(2)" style="flex: 1;position: relative;" :class="tabIndex==2?'active':'a'">
				已回复
				<image v-if="tabIndex==2" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/2176b3fec852179c4610f402fdac0589.png" style="width: 100rpx;height: 12rpx;position: absolute;left: 50%;bottom: 16rpx;transform: translateX(-50%);"  mode=""></image>
			</view>
			<view @click="dibu(3)" style="flex: 1;position: relative;" :class="tabIndex==3?'active':'a'">
				未回复
				<image v-if="tabIndex==3" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230411/2176b3fec852179c4610f402fdac0589.png" style="width: 100rpx;height: 12rpx;position: absolute;left: 50%;bottom: 16rpx;transform: translateX(-50%);"  mode=""></image>
			</view>
		</view> -->
		<view style="width: 92%;margin: 20rpx auto;">
			<view  v-for="(item,index) in list" :key='index' style="padding: 20rpx;background-color: #FFFFFF;border-radius: 10rpx;margin: 20rpx auto;">
				<view style="width: 92%;overflow: hidden;margin: 20rpx auto;">
					<image :src="item.client.avatar" style="width: 64rpx;height: 64rpx;display: block;float: left;border-radius: 50%;margin-top: 8rpx;" mode=""></image>
					<view style="margin-left: 20rpx;float: left;width: 60%;">
						<view style="line-height: 40rpx;color: #191919;font-size: 26rpx;">
							{{item.client.nickname}}
						</view>
						<view style="line-height: 40rpx;color: #999999;font-size: 24rpx;">
							{{item.create_time}}
						</view>
					</view>
					<text @click="hui(item.id)" style="color: #1fb0ac;float: right;">
						回复
					</text>
				</view>
				<view style="width: 92%;margin: 0 auto;color: #191919;font-size: 24rpx;line-height: 50rpx;">
					{{item.comment}}
				</view>
				<!-- <view style="width: 92%;margin: 0 auto;color: #999999;font-size: 24rpx;line-height: 40rpx;">
					浏览{{item.pv}}次
				</view> -->
				<view v-if="item.reply" style="width: 92%;margin: 10rpx auto 30rpx;box-sizing: border-box;padding: 30rpx;border-radius: 10rpx;background-color:#F7F7F7 ;font-size: 26rpx;line-height: 50rpx;word-break:break-all;word-wrap:break-word;">
					<text style="color: #336699;">{{item.firm.name}}：</text>
					<text style="color: #333333;">{{item.reply}}</text>
				</view>
			</view>
		</view>
		<view style="text-align: center;margin-top: 50rpx;">
			<image v-if="kk" :src="require('@/static/my/no-data.png')" style="width: 334rpx;"  mode="widthFix"></image>
			<view v-if="list.length==0" style="text-align: center;color: #999999;font-size: 30rpx;line-height: 60rpx;">
				暂无
			</view>
			<view v-if="list.length>0 && enmpy" style="text-align: center;color: #999999;font-size: 30rpx;line-height: 60rpx;width: 100%;">
				没有更多了
			</view>
		</view>
		<uni-popup id="popup" ref="popup" :type="type" :animation="true">
			<view class="" style="background-color: #FFFFFF;padding:20upx 30upx 0;border-radius: 20upx;width: 500rpx;">
				<textarea   v-model="nei" placeholder="请输入您的留言" style="padding:20rpx;font-size: 24rpx;line-height: 40rpx;height: 200rpx;" />
				<view class="footer">
					<button @click="quxiao" style="flex: 1;background-color: #f3f3f3;color: #333333;margin-right: 20rpx;font-weight: 600;"
					 type="default">取消</button>
					<button @click="huifu" lang="zh_CN" style="flex: 1;background-color: #1fb0ac;color: #FFFFFF;" open-type="getUserInfo">留言</button>
					<!-- <button @click="submitLink" type="default" class="submit">确认提交</button> -->
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				tabIndex:1,
				page: 1,
				kk:false,
				enmpy: false,
				list:[],
				shop_xx:{},
				type:'center',
				id:'',
				nei:''
			}
		},
		onLoad() {
			this.shop_xx=uni.getStorageSync('shop_xx')
			// this.yang()
		},
		onPullDownRefresh() {
			this.yang()
		       setTimeout(function () {
		           uni.stopPullDownRefresh();
		       }, 1500);
		  },
		onShow() {
			this.page= 1
			this.kk=false
			this.enmpy= false
			this.list=[]
			this.shop()
		},
		onReachBottom: function() {
			if (this.enmpy) {
				return
			} else {
				this.shop()
			}
		},
		methods:{
			// 增加访问量
			yang:function(){
				this.post('api/homepage/pageviews',{path:'/subpages/pages/shop/wdfb'},true).then(res=>{
					console.log(res)
				})
			},
			dibu:function(index){
				this.tabIndex=index
			},
			shop:function(){
				this.post('api/firm/message',{page:this.page,limit:10},true).then(res=>{
					if(res.code==1){
						if(this.page==1){
							if (res.data.data== null || res.data.data.length == 0) {
								this.kk = true
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}else{
							if (res.data.data== null || res.data.data.length == 0) {
								this.enmpy = true
								return
							} else if (res.data.data.length < 10) {
								this.enmpy = true
							}
						}

						this.page++
						this.list.push(...res.data.data)
					}else{
						this.kk = true
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})
			},
			hui:function(id){
				this.$refs.popup.open()
				this.id=id
			},
			quxiao:function(){
				this.$refs.popup.close()
			},
			huifu:function(){
				this.post('api/firm/message_reply',{message_id:this.id,reply:this.nei},true).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
						this.$refs.popup.close()
						this.nei=''
						this.page= 1
						this.kk=false
						this.enmpy= false
						this.list=[]
						this.shop()
					}else{
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 1000
						})
					}
				})

			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
		font-family: Demibold;
	}
	.footer {
		display: flex;
		justify-content: space-between;
		border-top: 1px solid #f4f4f4;
		margin-top: 30rpx;
		padding-bottom: 20rpx;

		button {
			margin: 0 auto;
			width: 100%;
			background-color: #19BE6B;
			// width: 200upx;
			border-radius: 10upx;
			font-size: $uni-font-size-sm;
			// padding: 22upx 34upx;
			height: 80upx;
			font-size: 30rpx;
			line-height: 80upx !important;
			// line-height: 1;
			color: #FFFFFF;
		}

		button:after {
			border: 0;
		}
	}
</style>
